<template>
  <div>
    <v-row>
      <v-col cols="4" md="4" sm="4" xs="4" class="pr-1">
        <v-select
          v-model="modelValue.year"
          :items="years"
          :placeholder="$t('placeholder.date.year')"
          menu-icon="custom:arrowDown"
          variant="solo-filled"
          hide-details
          :error="!!errMsg"
          @update:menu="onMenuChange"
        ></v-select>
      </v-col>
      <v-col cols="4" md="4" sm="4" xs="4" class="px-1">
        <v-select
          v-model="modelValue.month"
          :items="dates"
          item-title="month"
          item-value="month"
          :placeholder="$t('placeholder.date.month')"
          menu-icon="custom:arrowDown"
          variant="solo-filled"
          hide-details
          :error="!!errMsg"
          @update:menu="onMenuChange"
        ></v-select>
      </v-col>
      <v-col cols="4" md="4" sm="4" xs="4" class="pl-1">
        <v-select
          v-model="modelValue.day"
          :items="days"
          :placeholder="$t('placeholder.date.day')"
          menu-icon="custom:arrowDown"
          variant="solo-filled"
          hide-details
          :error="!!errMsg"
          @update:menu="onMenuChange"
        ></v-select>
      </v-col>
    </v-row>
    <div v-if="errMsg" class="text-end font-size-12 font-weight-400 line-height-120 text-primary-x mt-1">
      {{ errMsg }}
    </div>
  </div>
</template>
<script setup>
import { computed, nextTick, watch } from 'vue'
import { VCol, VRow, VSelect } from 'vuetify/components'

const props = defineProps({
  modelValue: {
    type: Object,
    required: false,
  },
  errMsg: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

const years = computed(() => {
  // 年份最多只能選今年會滿18歲的
  const currentYear = new Date().getFullYear() - 18
  const years = []
  for (let i = currentYear; i >= 1900; i--) {
    years.push(i)
  }
  return years
})

const dates = [
  { month: 1, maxDay: 31 },
  { month: 2, maxDay: 28 },
  { month: 3, maxDay: 31 },
  { month: 4, maxDay: 30 },
  { month: 5, maxDay: 31 },
  { month: 6, maxDay: 30 },
  { month: 7, maxDay: 31 },
  { month: 8, maxDay: 31 },
  { month: 9, maxDay: 30 },
  { month: 10, maxDay: 31 },
  { month: 11, maxDay: 30 },
  { month: 12, maxDay: 31 },
]

const isLeapYear = computed(() => {
  if (!modelValue.value.year) return false
  return modelValue.value.year % 400 === 0 || (modelValue.value.year % 4 === 0 && modelValue.value.year % 100 !== 0)
})

const days = computed(() => {
  if (!modelValue.value.month) {
    return getDays(30)
  }

  if (modelValue.value.month === 2) {
    return isLeapYear.value ? getDays(29) : getDays(28)
  }

  const maxDay = dates.find((item) => item.month === modelValue.value.month)?.maxDay
  return getDays(maxDay)
})

const getDays = (days) => {
  const arr = []
  for (let i = 1; i <= days; i++) arr.push(i)
  return arr
}

watch(isLeapYear, (value) => {
  if (!value) {
    if (modelValue.value.month === 2 && modelValue.value.day >= 29) {
      console.log('閏年被改掉啦，改成28天')
      modelValue.value.day = 28
    }
  }
})

watch(
  () => modelValue.value.month,
  (value) => {
    let maxDay = dates.find((item) => item.month === value)?.maxDay
    maxDay = isLeapYear.value && value === 2 ? maxDay + 1 : maxDay
    if (modelValue.value.day > maxDay) modelValue.value.day = maxDay
  },
)

/**
 * 在Select的Menu被打開的時候插入Class
 * 讓v-select的z-index可以大過PopupDialog
 * @param {Boolean} value
 */
const onMenuChange = () => {
  nextTick(() => {
    const elements = document.getElementsByClassName('v-menu')
    if (elements.length <= 0) return
    for (const element of elements) element.classList.add('v-menu__z-index')
  })
}
</script>
<style lang="scss" scoped>
.input-wrap {
  display: flex;
  flex-direction: column;
}
::v-deep(.v-field) {
  border-radius: 0.625rem;
  background: var(--bg-dialog, #333546);

  height: 2.5rem;
}

::v-deep(.v-field--error) {
  border-radius: 0.625rem;
  border: 0.0625rem solid rgb(var(--v-theme-primary-x));
  background: linear-gradient(0deg, rgba(235, 0, 27, 0.1) 0%, rgba(235, 0, 27, 0.1) 100%),
    rgb(var(--v-theme-background));
}

::v-deep(.v-field__field) {
  height: 2.5rem;
}

::v-deep(.v-field__input) {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;

  input {
    color: var(--color-text-input, #b8b8b8);

    font-family: 'PingFang SC';
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.0125rem;
  }

  .v-select__selection {
    height: 1.25rem;
  }
}

::v-deep(v-field__append-inner) {
  height: 2.5rem !important;
  .v-select__menu-icon {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }
}
</style>
